import Vue from 'vue'
import Vuex from 'vuex'

// 在vue中使用vuex插件
Vue.use(Vuex)
// vuex中的数据和页面也能实现数据双向绑定
var store = new Vuex.Store({
    // state vuex存储数据的属性
    state: {
        // 记录购物车数据
        products: [],
        username:"zhangsan",
        sumPrice: 0
    },
    getters: {
        // 写vuex中的计算属性
        // 用来预处理数据 
        // goodsCount(state) {
        //     var num = 0
        //     state.products.forEach((item) => {
        //         num += item.count
        //     })
        //     return num
        // }
    },
    mutations: {
        // 写改变vuex数据的唯一方法就是提交mutation
        // mutation 方法的第一个参数是默认的 就是 state对象 第二个参数是方法触发时传递的参数
        changeProducts(state, val) {
            // some方法 如果数组中有一个满足条件的就返回true
            // var bool = state.products.some((item, index) => {
            //     return item._id == val._id
            // })
            if(state.products.length === 0) {
                val.count = 1
                state.products.push(val)
            } else {
                var flag = false // 标记购物车中是否已经有该商品
                state.products.forEach((item) => {
                    if(item._id == val._id) {
                        item.count++
                        flag = true
                    } 
                })

                if(!flag) {
                    val.count++
                    state.products.push(val)
                }
            }
        }
    }
})


export default store
